<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">
        当前位置：首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>项目管理</el-breadcrumb-item>
      <el-breadcrumb-item>项目配置</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <div slot="header">
        <span>{{titel}}</span>
      </div>
      <!-- 表单 -->
      <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="130px">
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="addForm.name" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="所属合作方" prop="partner_id">
          <el-select v-model="addForm.partner_id" filterable clearable @change="selectPartner">
            <el-option v-for="item in selectData.get_partner" :key="item.id" :label="item.name + '【' + item.id + '】'"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="归属机构" prop="org_id">
          <el-cascader
            ref="chooseRegionDom"
            v-model="addForm.org_id"
            :options="options"
            :props="{ checkStrictly: true }"
            :show-all-levels="false"
            style="width: 470px;" @change="checkOrg"
             >
          </el-cascader>
          <!-- <el-select v-model="addForm.org_id" filterable clearable>
            <el-option v-for="item in selectData.org" :key="item.id" :label="item.name + '【' + item.id + '】'"
              :value="item.id">
            </el-option>
          </el-select> -->
        </el-form-item>
        <el-form-item label="合作方负责部门" prop="partner_dep">
          <el-input v-model="addForm.partner_dep" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="合作方负责人" prop="partner_user">
          <el-input v-model="addForm.partner_user" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="合作方联系方式" prop="partner_phone">
          <el-input v-model="addForm.partner_phone" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="负责部门" prop="businessUser.department_code">
          <el-select v-model="addForm.businessUser.department_code" filterable clearable @change="selectDep">
            <el-option key="" label="请选择" value=""></el-option>
            <el-option v-for="item in selectData.department" :key="item.id" :label="item.name + '【' + item.id + '】'"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商务负责人" prop="business_id">
          <el-select v-model="addForm.business_id" filterable clearable>
            <el-option key="" label="请选择" value=""></el-option>
            <el-option v-for="item in selectData.user" :key="item.id" :label="item.name + '【' + item.id + '】'"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目负责人" prop="project_user_id">
          <el-select v-model="addForm.project_user_id" filterable clearable>
            <el-option key="" label="请选择" value=""></el-option>
            <el-option v-for="item in selectData.user" :key="item.id" :label="item.name + '【' + item.id + '】'"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="对接方式" prop="docking_type">
          <el-select v-model="addForm.docking_type" filterable clearable multiple>
            <el-option key="1" label="H5卡券模式" value="1"></el-option>
            <el-option key="2" label="API卡券模式" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input type="textarea" v-model="addForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <el-row style="margin-top: 10px">
        <el-button @click="$router.push('/project/ProjectConfig')">
          取 消
        </el-button>
        <el-button class="theme-background-color" @click="saveInfo">保 存</el-button>
      </el-row>
    </el-card>
  </div>
</template>

<script>
  export default {
    components: {

    },
    data() {
      var checkphone = (rule, value, callback) => {
        const phoneReg = /(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/
        if (value === '') {
          callback(new Error('请输入手机号'))
        } else if (!phoneReg.test(value)) {
          // 引入methods中封装的检查手机格式的方法
          callback(new Error('请输入正确的手机号!'))
        } else {
          callback()
        }
      }
      return {
        // 标题
        titel: '新增项目',
        addForm: {
          name: '',
          partner_id: '',
          org_id: '',
          partner_dep: '',
          partner_user: '',
          partner_phone: '',
          business_id: '',
          project_user_id: '',
          docking_type: [],
          remark: '',
          businessUser: {
            department_code: ''
          }
        },
        addFormRules: {
          name: [
            { required: true, message: '请输入', trigger: 'blur' },
            { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
          ],
          partner_id: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          org_id: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          partner_user: [
            { required: true, message: '请输入', trigger: 'blur' },
            { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
          ],
          partner_phone: [
            { required: true, message: '请输入', trigger: 'blur' },
            { validator: checkphone, trigger: 'blur' }
          ],
          department_code: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          business_id: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          project_user_id: [
            { required: true, message: '请选择', trigger: 'change' }
          ],
          docking_type: [
            { required: true, message: '请选择', trigger: 'change' }
          ]
        },
        selectData: [],
        options: []
      }
    },
    created() {
      this.getSelectData()
      if (this.$route.query.id !== undefined) {
        this.titel = '编辑项目'
        this.getDetail()
      }
      if (this.$route.query.partner_id !== undefined) {
        this.titel = '编辑项目'
        this.addForm.partner_id = this.$route.query.partner_id
        this.selectPartner()
      }
    },
    methods: {
      checkOrg(val) {
        const nodeList = this.$refs.chooseRegionDom.getCheckedNodes()
        this.addForm.org_id = nodeList[0].value
      },
      async getSelectData() {
        const url = '/admin/Data/find'
        const { data: res } = await this.$http.post(url, { code: 'user,get_partner,department', user_status: 1, del_flag: '0' })
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.selectData = res.data
        this.selectData.project_user = res.data.user
      },
      async getDetail() {
        const url = '/admin/Project/projectInfo'
        const { data: res } = await this.$http.post(url, { id: this.$route.query.id })
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
       const result = JSON.parse(JSON.stringify(res.data))
       res.data.docking_type = result.docking_type.split(',')
       this.addForm = res.data
      },
      async selectPartner() {
        this.addForm.org_id = ''
        const url = '/admin/Data/find'
        const { data: res } = await this.$http.post(url, { code: 'org', partner_id: this.addForm.partner_id })
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.options = res.data.org
        console.log(this.addForm.partner_id)
      },
      async selectDep() {
        this.addForm.business_id = ''
        const url = '/admin/Data/find'
        const { data: res } = await this.$http.post(url, { code: 'user', department_code: this.addForm.businessUser.department_code, user_status: 1, del_flag: '0' })
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.selectData.user = res.data.user
      },
      async getProductData(typeCode) {
        const {
          data: res
        } = await this.$http.post('admin/Data/find', {
          code: 'product',
          type_code: typeCode
        })
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.selectData.product = res.data.product
      },
      async getGoodsData(typeCode) {
        const {
          data: res
        } = await this.$http.post('admin/Data/find', {
          code: 'goods',
          type_code: typeCode
        })
        if (res.meta.status !== 200) {
          return this.$message.error(res.meta.msg)
        }
        this.selectData.goods = res.data.goods
      },
      // 清空适用商品配置的数据
      clearApplyGoodsConfig() {
        this.$refs.applyGoodsFormRef.resetFields()
      },
      async saveInfo() {
        this.$refs.addFormRef.validate(async (valid) => {
          if (!valid) return
          var url = 'admin/Project/addProject'
          if (this.addForm.id !== undefined) {
            url = 'admin/Project/editProject'
          }
          const { data: res } = await this.$http.post(url, this.addForm)
          if (res.meta.status !== 200) {
              return this.$message.error(res.meta.msg)
          }
          this.$message.success(res.meta.msg)
          this.$router.push('/project/ProjectConfig')
        })
      }
    },
    computed: {

    },
    watch: {

    }
  }
</script>

<style lang="less" scoped>
  .el-form {
    width: 600px;
    margin-left: 15px;

    .el-select {
      width: 100%;
    }
  }
</style>
ss
